// 右键生成菜单插件
import { createVNode,createApp, render } from "vue"
import resize from '@/components/resize/index.vue'
let activeVnode
// 监听右键点击触发的事件
const mountResize = (e, binding)=> {
    e.preventDefault();
    let instance = createVNode(resize,{
      name: '自动拖动',
      onClose: ()=> {
        render(null, document.querySelector(`#${binding.value}`))
        document.querySelector(`#${binding.value}`).removeEventListener('contextmenu',(e)=> {mountResize(e, binding)})
      },
      onResize: (option)=> {
        // 将值抛出 用外部函数解决4
        // 向外部传出当前拖动位置（top、leftTop、right....）,以及鼠标移动位置
        activeVnode.props['onResize'](option)
      },
    })
    instance.appContext = app._context
    render(instance, document.querySelector(`#${binding.value}`))
}
const resizeable = {
    mounted(el, binding,vNode) {
      activeVnode = vNode
      el.addEventListener("mousedown", (e)=> {
        if(e.button != 0) return
        mountResize(e,binding)
      },true);
    }
  }

export default resizeable